<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <div class="app-container">
      <div class="search">
        <el-card
          shadow="never"
          class="box-card"
        >
          <el-form
            ref="queryPage"
            :model="queryPage"
            :rules="rules"
            label-width="78px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="车辆类型:">
                  <el-select
                    ref="select"
                    v-model="queryPage.truckTypeId"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in carTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  prop="licensePlate"
                  label="车牌号码:"
                >
                  <el-input
                    v-model="queryPage.licensePlate"
                    placeholder="请输入车牌号码"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-button
                  type="warning"
                  @click="fuzzySearch"
                >搜索</el-button>
                <el-button
                  size="medium"
                  @click="resetData"
                >重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <div class="handover">
        <el-card shadow="never">
          <div
            class="tab-chage"
            @click="activeChage($event)"
          >
            <div
              class="tab-item is-active"
              @click="allVehicles"
            >
              <span>全部</span>
              <span class="num">{{
                Number(stateVehicle[0]) + Number(stateVehicle[1])
              }}</span>
            </div>
            <div
              class="tab-item"
              @click="availableVehicles"
            >
              <span>可用</span>
              <span class="num">{{ stateVehicle[1] }}</span>
            </div>
            <div
              class="tab-item"
              @click="serviceVehicle"
            >
              <span>停用</span>
              <span class="num">{{ stateVehicle[0] }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="presentation">
        <el-card shadow="never">
          <!-- 新增车辆按钮 -->
          <el-button
            class="add-button"
            type="warning"
            @click="dialogShow = true"
          >
            新增车辆
          </el-button>
          <!-- 车辆分页数据表格 -->
          <el-table
            :data="items"
            stripe
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              :index="1"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="licensePlate"
              label="车牌号码"
              width="118"
            ></el-table-column>
            <el-table-column
              prop="truckTypeName"
              label="车辆类型"
              width="115"
            ></el-table-column>
            <el-table-column
              prop="driverNum"
              label="司机数量"
              width="110"
            ></el-table-column>
            <el-table-column
              prop="workStatus"
              label="车辆状态"
              width="114"
            >
              <template v-slot="{ row }">
                <div
                  :class="{
                    available: row.workStatus === 1,
                    deactiveate: row.workStatus === 0
                  }"
                ></div>
                {{
                  row.workStatus === 1
                    ? '可用'
                    : row.workStatus === 0
                      ? '停用'
                      : '无'
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="deviceGpsId"
              label="GPS设备ID"
              width="168"
            ></el-table-column>
            <el-table-column
              prop="allowableLoad"
              label="实载重量（T）"
              width="168"
            ></el-table-column>
            <el-table-column
              prop="allowableVolume"
              label="实载体积（方）"
              width="150"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
              <template v-slot="{ row }">
                <!-- <el-button class="Operation" type="text" @click="detailProcessing(row.id)">查看详情</el-button> -->
                <el-button
                  class="Operation"
                  type="text"
                  @click="detailProcess(row.id)"
                >查看详情</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                  :class="{ Operation: true, 'state-car-color': row.workStatus === 1 }"
                  type="text"
                  @click="stopStarting(row)"
                >
                  {{ row.workStatus === 1 ? '停用' : row.workStatus === 0 ? '启用' : '状态异常' }}
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                  class="Operation"
                  type="text"
                  @click="showdriver(row)"
                >配置司机</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-row
            type="flex"
            justify="center"
          >
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              :current-page="queryPage.page"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="queryPage.pageSize"
              :total="counts"
              @current-change="pageChange"
              @size-change="pageSizeChange"
            ></el-pagination>
          </el-row>
        </el-card>
      </div>
    </div>
    <vehicle-add
      :dialog-show.sync="dialogShow"
      :car-type-list="carTypeList"
      @add="truckList"
    ></vehicle-add>
    <!-- 启Starting弹出框 -->
    <el-dialog
      title="车辆启用"
      :visible.sync="dialogStarting"
      width="30%"
      :before-close="handleClose"
    >
      <el-row
        type="flex"
        justify="start"
        style="margin-bottom: 15px;"
      >
        <el-col>
          <span>确定要启用吗? 车辆启用需满足以下条件:</span>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 15px;">
        <el-col :span="13">
          <span>① 车辆信息已完善</span>
        </el-col>
        <el-col :span="11">
          <span>② 绑定司机>=2,且有排班</span>
        </el-col>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="esc-btn"
          size="mini"
          style="margin-bottom: 10px;"
          @click="dialogStarting = false"
        >取 消</el-button>
        <el-button
          type="warning"
          size="mini"
          class="req-btn"
          @click="startingChange"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- stop停弹出框 -->
    <el-dialog
      title="车辆停用"
      :visible.sync="dialogStop"
      width="30%"
      :before-close="handleClose"
    >
      <el-row style="margin-bottom: 15px;">
        <span>确定要停用吗? 车辆停用需满足以下条件</span>
      </el-row>
      <el-row style="margin-bottom: 15px;">
        <el-col :span="15">
          <span>① 车辆当前无运输队伍</span>
        </el-col>
        <el-col :span="9">
          <span>② 车辆无关联运输线路</span>
        </el-col>
      </el-row>
      <el-row>
        <span style="color: rgb(255, 191, 43);">注：停用后司机将自动解除绑定</span>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="esc-btn"
          size="mini"
          style="margin-bottom: 10px;"
          @click="dialogStop = false"
        >取 消</el-button>
        <el-button
          type="warning"
          class="req-btn"
          size="mini"
          @click="stopChange"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 司机确认弹窗 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-row style="margin-bottom: 15px;">
        <span>配置司机需满足以下条件：</span>
      </el-row>
      <el-row style="margin-bottom: 15px;">
        <el-col :span="12">
          <span>① 车辆信息已完善</span>
        </el-col>
        <el-col :span="12">
          <span>② 车辆无未完成运输任务</span>
        </el-col>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="esc-btn"
          size="mini"
          style="margin-bottom: 10px;"
          @click="dialogVisible = false"
        >取 消</el-button>
        <el-button
          type="warning"
          class="req-btn"
          size="mini"
          @click="dialogDriver"
        >确 定</el-button>
      </span>
    </el-dialog>
    <arrange-driver
      ref="arrange"
      :title-info="{text:'配置司机'}"
      :car-modal-info="carModalInfo"
      :drivers-list="driversList"
      @newDataes="getData()"
    ></arrange-driver>
  </div>
</template>
<!-- , truckStatusUse 启用, truckStatusNoUse 停用 -->
<script>
import { truckList, getCarTypeStatics, getCarTypeList, truckStatusUse, truckStatusNoUse, unBindDriverList } from '@/api/transit'
import VehicleAdd from '@/views/transit/components/vehicle-add.vue'
import ArrangeDriver from '@/views/transit/components/arrange-driver.vue'
export default {
  name: 'Vehicle',
  components: {
    VehicleAdd,
    ArrangeDriver
  },
  data() {
    return {
      //  分页车辆数据参数（查询也用）
      queryPage: {
        licensePlate: null, // 车牌号码
        page: 1, // 当前页码
        pageSize: 10, // 每页数据条目数
        truckTypeId: null, // 车辆类型id
        workStatus: null // 车辆状态
      },
      pages: null, // 总页数
      counts: null, // 数据总条目数
      rules: {
        licensePlate: [
          {
            validator(rule, value, callback) {
              const pattern = /^[A-Z0-9]{0,8}$/
              const res = pattern.test(value)
              if (res) {
                callback()
              } else {
                callback(new Error('车牌号格式不符合规范'))
              }
            },
            trigger: 'blur'
          }
        ]
      },
      items: [], // 分页车辆数据数组
      stateVehicle: [], // 车辆状态数组
      carTypeList: [], // 车辆类型数组
      vehicleData: {}, // 车辆详情数据
      dialogShow: false, // 新建弹窗控制变量
      dialogStarting: false, // 启
      dialogStop: false, // 停
      rowId: '',
      params: {
        page: 1,
        pageSize: 10
      },
      dialogVisible: false,
      driversList: [],
      carModalInfo: {}
    }
  },
  created() {
    // 初始化分页数据
    this.truckList()
    // 初始化类型统计数据
    this.getCarTypeStatics()
    // 初始化模糊搜索下拉框数据
    this.getCarTypeList()
    this.getData()
  },
  methods: {
    // handover排他思想函数
    activeChage(e) {
      // 获取点击目标元素
      const targetElement = e.target
      // 检查点击的元素是否为tab-item或者tab-item的子元素
      if (
        targetElement.classList.contains('tab-item') ||
        targetElement.parentNode.classList.contains('tab-item')
      ) {
        // 获取所有的tab-item元素
        const tabItems = document.querySelectorAll('.tab-item')
        // 移除所有tab-item的active类
        tabItems.forEach((item) => {
          item.classList.remove('is-active')
        })
        // 判断被点击元素是否携带有tab-item类，如果有没有就给它的父元素添加active类
        // 如果没有就给它自己添加active类
        if (!targetElement.classList.contains('tab-item')) {
          return targetElement.parentNode.classList.add('is-active')
        } else {
          targetElement.classList.add('is-active')
        }
      }
    },
    // 获取车辆分页数据
    async truckList() {
      const { data } = await truckList(this.queryPage)
      this.pages = data.pages
      this.counts = Number(data.counts)
      this.items = data.items
    },
    // 当前页更改
    pageChange(newPage) {
      this.queryPage.page = newPage
      this.truckList()
      // console.log(this.queryPage.page)
    },
    // 每页总数据条目数更改
    pageSizeChange(newSize) {
      this.queryPage.pageSize = newSize
      this.truckList()
      console.log(this.queryPage.pageSize)
    },
    // 获取下拉框数据
    async getCarTypeList() {
      const { data } = await getCarTypeList()
      console.log(data)
      this.carTypeList = data
    },
    // 模糊搜索
    fuzzySearch() {
      // console.log(this.queryPage)
      this.truckList()
    },
    // 重置搜索条件
    resetData() {
      this.queryPage.truckTypeId = null
      this.$refs.queryPage.resetFields()
    },
    // 统计车辆状态
    async getCarTypeStatics() {
      const { data } = await getCarTypeStatics()
      this.stateVehicle = data
      // console.log(this.stateVehicle)
    },
    // 切换全部车辆显示
    allVehicles() {
      this.queryPage.workStatus = null
      this.queryPage.page = 1
      this.truckList()
    },
    // 切换可用车辆显示
    availableVehicles() {
      this.queryPage.workStatus = 1
      this.queryPage.page = 1
      this.truckList()
    },
    // 切换停用车辆显示
    serviceVehicle() {
      this.queryPage.workStatus = 0
      this.queryPage.page = 1
      this.truckList()
    },
    // 跳转详情页并携带id
    detailProcess(id) {
      this.$router.push(`vehicle-detail?id=${id}`)
    },
    // 停启用
    stopStarting(row) {
      console.log(row)
      // 启用状态
      if (row.workStatus === 0) {
        this.rowId = row.id
        this.dialogStarting = true
      } else if (row.workStatus === 1) {
        // 停用状态
        this.rowId = row.id
        this.dialogStop = true
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.dialogStop = false
      this.dialogStarting = false
    },
    // 启用状态改变
    async startingChange() {
      const res = await truckStatusUse(this.rowId)
      this.dialogStarting = false
      console.log(res)
      if (res.code === 1) {
        this.$message.error(res.msg)
      } else {
        this.$message.success('操作成功')
      }
      setTimeout(() => {
        this.getCarTypeStatics()
        this.truckList()
      }, 300)
    },
    // 停用状态改变
    async stopChange() {
      const res = await truckStatusNoUse(this.rowId)
      this.dialogStop = false
      console.log(res)
      if (res.code === 1) {
        this.$message.error(res.msg)
      } else {
        this.$message.success('操作成功')
      }
      setTimeout(() => {
        this.getCarTypeStatics()
        this.truckList()
      }, 300)
    },
    showdriver(row) {
      this.dialogVisible = true
      console.log(row)
      this.carModalInfo = row
    },
    dialogDriver() {
      this.dialogVisible = false
      this.$nextTick(() => {
        this.$refs.arrange.dialogFormV()
      })
    },
    getData() {
      // this.getCarTypeStatics() // 判断司机可不可用
      this.getDriverList() // 获取司机列表
      this.truckList()
    },
    //  获取未绑定的司机数据
    async getDriverList() {
      const { data: res } = await unBindDriverList()
      this.driversList = res
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-card__body {
  padding: 20px 0px;
  .el-col {
    height: 41px;
    padding: 0px 37px 0px 30px;
    .el-form-item__label {
      font-weight: 400;
    }
    .add-button {
      width: 90px;
    }
  }
}
.app-container {
  .handover {
    margin-top: 20px;
    ::v-deep .el-card__body {
      padding: 0;
    }
    .tab-chage {
      display: flex;
      .tab-item {
        width: 120px;
        height: 48px;
        font-size: 14px;
        line-height: 48px;
        text-align: center;
        .num {
          font-weight: 600;
        }
      }
    }
  }
  .presentation {
    margin-top: 20px;
    ::v-deep .el-card__body {
      padding: 0;
    }
    .el-button {
      margin-bottom: 20px;
    }
    .el-card {
      padding: 28px;
    }
    .el-pagination {
      margin-top: 20px;
      padding-bottom: 40px;
    }
    .Operation {
      font-size: 13px;
      margin: 0;
    }
    .state-car-color {
      color: red;
    }
    .el-table__row {
      height: 50px;
    }
    .available {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #1dc779;
      margin-right: 3px;
    }
    .deactiveate {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #e15536;
      margin-right: 3px;
    }
  }
}
::v-deep .active {
  color: #e15536 !important;
  // background-color: #ffeeeb;
}
::v-deep .is-active {
  color: #e15536 !important;
  background-color: #ffeeeb;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    // text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
.esc-btn {
    height: 32px !important;
    width: 55px !important;
    color: #2a2929;
    border: 1px solid #d8dde3;
    border-radius: 5px;
    font-weight: 400;
    margin-left: 15px !important;
}
  .esc-btn:hover {
    background: #ffeeeb !important;
    border-color: #f3917c !important;
    color: #e15536 !important;
  }
  .esc-btn:focus {
    background: #ffeeeb !important;
    border-color: #f3917c !important;
    color: #e15536 !important;
  }
  ::v-deep .el-pagination .el-pager li:hover {
    color: #e15536 !important;
  }
  // sizes, prev, pager, next, jumper
    ::v-deep .el-pagination button:hover {
    color: #e15536 !important;
  }
  ::v-deep .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color:  #e15536 !important;
}
  .req-btn {
    height: 32px !important;
    width: 55px !important;
  }

</style>

<style>
.startconfirm {
  width: 481px;
}
.startconfirm .el-message-box__header {
  padding-bottom: 4px;
}
.startconfirm .el-message-box__container {
  margin-bottom: 15px;
}
.confirm .el-message-box__status.el-icon-warning {
  left: 70px;
}
.confirm.el-message-box__title {
  font-size: 16px;
}
.confirm .el-message-box__message p {
  color: #f92d2d;
  margin-top: 5px;
}
.confirm .el-message-box__btns {
  text-align: center;
  margin-top: 10px;
}
</style>
